<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>箭头函数实战</title>
		<style>
			div { width:200px; height:200px; background: #58a;}
		</style>
	</head>
	<body>
		<div id="ad"></div>
		<script>
			// 需求1 点击div 2秒后颜色变成粉色
			let ad = document.getElementById('ad');
			ad.addEventListener('click',function(){
				//_this = this;
				setTimeout(() => {
					console.log(this);
					// _this.style.background = 'pink';
					this.style.background = 'pink';
				},2000);
			});
			// 需求2 从数组中返回偶数的元素
			const arr = [1,3,5,6,7,8,9,11,100];
			// const result = arr.filter(function(item) {
			// 	return item % 2 === 0;
			// });
			const result = arr.filter(item => item % 2 === 0);
			console.log(result);
			// 箭头函数适合与this无关的回调,定时器,数组的方法回调
			// 箭头函数不适合与this有关的回调,事件回调,对象的方法
		</script>
	</body>
</html>